<template>
  <div class="w-full">
    <div class="bg-white h-16 w-full px-6 leading-[64px] rounded-[6px] mb-6">
      <span :class="activeName === '0' ? 'tab-active-item' : 'tab-item'" @click="changeTabs('0')">未读消息</span>
      <span :class="activeName === '1' ? 'tab-active-item' : 'tab-item'" @click="changeTabs('1')">已读消息</span>
    </div>
    <div class="bg-white rounded-[6px] p-6 overflow-auto" style="height: calc(100% - 64px);">
      <div class="flex justify-between items-center mb-6">
        <Button @click="setPatchRead" v-if="activeName === '0'">标记已读</Button>
        <div v-else></div>
        <div class="flex items-center gap-2">
          <el-input v-model="messageName" style="width: 240px;height: 32px;" placeholder="请输入消息名称">
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
          <Button @click="getMessage">搜索</Button>
        </div>
      </div>
      <div class="mb-8">
        <el-table ref="multipleTableRef" :data="tableData" row-key="id" :show-header="false" @row-click="openItemDetail"
          style="width: 100%">
          <el-table-column type="selection" width="55" v-if="activeName === '0'" />
          <el-table-column property="content" class-name="column-name" />
          <el-table-column property="write_date" class-name="column-time" width="200px" align="right" />
        </el-table>
      </div>
      <div class="w-full flex justify-center">
        <el-pagination background layout="prev, pager, next" :total="pagination.total" @size-change="sizeChange"
          @current-change="currenCchange" />
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="查看" width="640">
      <div>
        <div class="px-5 py-4 bg-[#33A0FF]/20 rounded-[6px] flex justify-between text-[#33A0FF] mb-5">
          <img class="w-4 h-[21px] mr-2" src="@/assets/images/warn.png" alt="">
          <div class="flex-1">
            <p>1.接受本次任务才能进项试卷任务答题；</p>
            <p>2.本次试卷任务只能做一次，即未通关将不能再次考核；</p>
            <p>3.请在有效期范围内完成考核任务；</p>
            <p>4.不接受则无法再次获取相关试卷信息</p>
          </div>
          <div class="cursor-pointer">
            <!--            收起<el-icon><ArrowUp /></el-icon>-->
          </div>
        </div>
        <div class="flex justify-between items-center mb-2">
          <span class="text-custom-text text-[16px] font-[600] leading-6">{{ list.content }}</span>
          <span class="text-custom-text-45 leading-[22px] text-[14px]">{{ list.message_date }}</span>
        </div>
        <div class="mb-4">
          <span class="text-custom-text-45">有效期：</span><span class="text-custom-text-65">{{ list.date_range[0] }}-{{
            list.date_range[1] }}</span>
        </div>
        <div class="grid grid-cols-1 gap-1 w-[288px]">
          <Card :card-data="cardData"></Card>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="danger" plain @click="paperTaskClick(-1)">拒绝</el-button>
          <el-button type="primary" @click="paperTaskClick(1)">同意</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { examApi } from '@/api/index.js'
import Button from "@/components/button.vue";
import { userApi } from '@/api/modules/user.js'
import Card from "@/components/card.vue";
import { ElMessage } from "element-plus";
const multipleTableRef = ref()
const selectionRows = ref([])
const dialogVisible = ref(false)
const activeName = ref('0')
const messageName = ref('')
const tableData = ref([])
const cardData = ref([])
const list = ref(null)
const pagination = ref({
  total: 0,
  pageSize: 10,
  page: 1
})
onMounted(() => {
  getMessage()
})
const getMessage = () => {
  const data = {
    page: pagination.value.page,
    pageSize: pagination.value.pageSize,
    status: activeName.value,
    start_date: '',
    end_date: '',
    content: messageName.value
  }
  examApi.getMessage(data).then(({ items, total }) => {
    tableData.value = items
    pagination.value.total = total
  })
}

const sizeChange = (size) => {
  pagination.value.pageSize = size
  getMessage()
}
const currenCchange = (page) => {
  pagination.value.page = page
  getMessage()
}

const setPatchRead = () => {
  selectionRows.value = multipleTableRef.value.getSelectionRows()
  const ids = selectionRows.value.map(i => i.id)
  if (!ids.length) {
    ElMessage.warning('请选择消息')
    return
  }
  examApi.setPatchRead({ ids }).then(res => {
    ElMessage.success('成功')
    getMessage()
  })
}
const openItemDetail = (row) => {
  if (row.source_name === 'paper_task') {
    fetchData(row.source_id)
  } else {
    examApi.setPatchRead({ ids: [row.id] }).then(res => {
      getMessage()
    })
  }
}
const paperTaskClick = async (status) => {
  userApi.paperTaskSave({
    task_id: list.value.task_id,
    status
  }).then(res => {
    ElMessage.success('处理成功')
  })
  dialogVisible.value = false
  getMessage()
}
const fetchData = async (id) => {
  try {
    const data = await userApi.getpaperTask({
      task_id: id
    });
    dialogVisible.value = true
    list.value = data
  } catch (err) {
    console.log('Failed to fetch data:', err);
  }
};
const changeTabs = (type) => {
  activeName.value = type
  getMessage()
}

</script>

<style scoped lang="scss">
:deep(.column-name) {
  padding: 20px 0;

  .cell {
    color: rgba(0, 0, 0, 0.88);
    font-weight: 500;
    line-height: 22px;
  }
}

:deep(.column-time) {
  .cell {
    color: rgba(0, 0, 0, 0.45);
    font-weight: 400;
    line-height: 22px;
  }
}
</style>